<page-header [breadcrumb]="breadcrumb" [action]="action">
  <ng-template #breadcrumb>
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <a href="#/dashboard">Dashboard</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>Services</nz-breadcrumb-item>
    </nz-breadcrumb>
  </ng-template>
  <ng-template #action>
    <button nz-button nzType="primary" style="float: right" (click)="load()" [nzLoading]="loading">Refresh</button>
  </ng-template>
</page-header>

<nz-list nzItemLayout="horizontal" style="background-color: #fff" [nzLoading]="loading" nzBordered>
  <nz-list-item *ngFor="let service of services" nzNoFlex>
    <a (click)="gotoServiceDetail(service.name, undefined)">{{ service.name }}</a>
    <span *ngFor="let version of service.versions" style="margin-left: 8px">
      <nz-tag *ngIf="version" [nzColor]="'green'"
        ><a (click)="gotoServiceDetail(service.name, version)">{{ version }}</a></nz-tag
      >
    </span>
  </nz-list-item>
  <nz-list-empty *ngIf="!services || !services.length"></nz-list-empty>
</nz-list>

<nz-back-top></nz-back-top>
